<!-- 修改 -->
<template>
    <div class="add-diary">
         <nut-navbar>
            <span>写日记</span>
            <a slot="back-icon" @click="goBack">返回</a>
            <a slot="more-icon" @click="handleSave">保存</a>
        </nut-navbar>
        <div class="diary-content">
            <nut-textinput v-model="addForm.title" placeholder="请填写日记标题" />
            <vue-html5-editor :content="addForm.diary" :height="500" :auto-height="true" :z-index="1000" ref="editor" @change="updateEditor"></vue-html5-editor>
        </div>
    </div>
</template>

<script>

import { API_DetailDiary, API_EditDiary } from "@/api/diary"

export default {
    data() {
        return {
            addForm: {
                diary_id: '',
                diary: '',
                title: ''
            }
        }
    },
    created() {
        this.getDiaryDetail()
    },
    mounted() {

    },
    computed: {

    },
    methods: {
        // 返回
        goBack() {
            this.$router.back()
        },
        // 获取日记详情
        getDiaryDetail() {
            API_DetailDiary({
                diary_id: this.$route.query.diaryId
            }).then(res => {
                if(res.data.code === 0) {
                    this.addForm.diary_id = res.data.result.id;
                    this.addForm.diary = res.data.result.diary;
                    this.addForm.title = res.data.result.title;
                }
            })
        },
        // 保存日记
        handleSave() {
            if(!this.addForm.title) {
                this.$toast.fail('请填写日记标题');
                return;
            }
            if(!this.addForm.diary) {
                this.$toast.fail('请填写日记内容');
                return;
            }
            API_EditDiary(this.addForm).then(res => {
                if(res.data.code === 0) {
                    this.$toast.success('保存成功');
                    this.$router.push('/diary')
                }
            })
        },
        // 富文本编辑框内容更新
        updateEditor(content) {
            this.addForm.diary = content;
        },
    }
}
</script>

<style lang="scss" scoped>
    .add-diary {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        .diary-content {
            width: 100%;
            position: absolute;
            top: 40px;
            bottom: 0;
            background: #FFFAF0;
            .vue-html5-editor {
                background: #FFFAF0;
                .toolbar {
                    overflow: visible;
                    .dashboard {

                    }
                }
                ::v-deep a {
                    text-decoration: underline;
                }
            }
        }
    }
</style>